<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-23 20:01:18
 * @LastEditTime: 2021-12-06 10:00:58
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/shop/components/pie-chart/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="ring-analyse analyse">
    <a-title border>{{ title }}</a-title>
    <view class="charts-box">
      <uni-ec-canvas
        class="uni-ec-canvas"
        id="uni-ec-canvas"
        ref="canvas"
        canvas-id="lazy-load-chart"
        :ec="ec"
      ></uni-ec-canvas>
    </view>
  </view>
</template>

<script>
import uniEcCanvas from '../../uni_modules/echart/uni-ec-canvas/uni-ec-canvas'

export default {
  name: '',
  mixins: [],
  props: {
    title: String,
    data: Array
  },
  components: {
    uniEcCanvas
  },
  data () {
    return {
      ec: {
        lazyLoad: true,

        option: {
          color: [
            '#9054EF', '#4ADEE0', '#5371F0', '#F17891',
            '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效  
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'  
            }
          },
          legend: {
            data: this.data.map((d) => d.name)
          },
          grid: {
            containLabel: true
          },
          series: [{
            type: 'pie',
            radius: ['20', '70'],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              lineHeight: 20,
              formatter: '{b} \n {c} 元'
            },
            grid: {
              containLabel: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.data
          }]
        }
      }
    }
  },
  created () { },
  onReady () {
    setTimeout(() => {
      this.$refs['canvas'].init()
    }, 1000)
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.ring-analyse {
  margin: 0 @box-gap;
  background: #fff;
  border-radius: 10rpx;

  .charts-box {
    width: 100%;
    height: 800rpx;
  }

  .uni-ec-canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>